<template>
  <div class="box">
    <Header />
    <!-- <div class="header">
      <div class="title">
        <div class="left">c2rusHub</div>
        <div class="right">译码方舟社区</div>
      </div>
    </div>-->
    <div class="content">
      <div class="search">
        <div class="l">{{ router.currentRoute.value.query.source }}</div>
        <div class="c">--></div>
        <div class="r">{{ detailInfo&&detailInfo.rustUrl }}</div>
      </div>
      <div class="info" v-if="detailInfo">
        <div class="left">
          <div style="padding:20px">
            <p>介绍: {{ detailInfo.cUrl }}</p>
            <p>rust地址: {{ detailInfo.rustUrl }}</p>
            <p>任务说明: {{ detailInfo.readmeDetail }}</p>
          </div>
        </div>
        <div class="right">
          <p>作者相关信息</p>
          <p>1. 姓名 :{{zanFlag?detailInfo.claimUserName:`${detailInfo.claimUserName&&detailInfo.claimUserName.substr(0, 1)}*`}} </p>
          <p>1. 电话 : {{zanFlag?detailInfo.claimPhone:maskPhoneNumber(detailInfo.claimPhone)}}</p>
          <p>1. 邮箱 :  {{zanFlag?detailInfo.claimEmail:'***@**.com'}}</p>
          <div class="zan">
            <div class="l">
              <span>{{ detailInfo.likes }}</span>
              <span @click="zan(1)">👍</span>
            </div>
            <div class="r">
              <span>{{ detailInfo.diss }}</span>
              <span @click="zan(2)">👎</span>
            </div>
          </div>

          <div class="btn">
            <el-button type="warning" icon="Star" size="large" @click="ElMessage.success('打赏成功!');zanFlag=true">打赏</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import router from '@/router/index'
import Header from '../components/header.vue'
import { ref, onMounted } from 'vue'
import { userApi } from '@/api/user'
import {ElMessage} from 'element-plus'
let detailInfo = ref()
let zanFlag = ref(false)
onMounted(() => {
  console.log(router.currentRoute.value.query.id)
  detail(router.currentRoute.value.query.id)
})
const maskPhoneNumber=(phoneNumber)=> {
  let str = ''
  if(phoneNumber){
    str = phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
  }else{

  }
  return str
}
const detail = async id => {
  let res = await userApi.getDetail(router.currentRoute.value.query.id)
  if (res.meta.code == '2000') {
    detailInfo.value = res.data
  }
  console.log(res)
}
const zan = async(type) => {
  let flag;
  type==1?flag='like':flag='diss'
  let res = await userApi.diss(router.currentRoute.value.query.id,{action:flag})
  detail()
}
</script>
<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  // background: #ddd;

  .content {
    width: 80%;
    min-width: 1200px;
    margin: 0 auto;
    height: 30px;
    padding: 20px;
    .search {
      width: 800px;
      margin: 0 auto;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      line-height: 50px;
      .l {
        border: 1px solid #ddd;
        background: #fff;
        padding: 0 20px;
      }
      .r {
        border: 1px solid #ddd;
        background: #fff;
        padding: 0 20px;
      }
      .c {
        border: 1px solid #ddd;
        background: #fff;
        padding: 0 20px;
      }
    }
    .info {
      width: 100%;
      min-height: 600px;
      background: #f7f8fa;
      margin-top: 20px;
      border-radius: 20px;
      display: flex;
      justify-content: space-between;
      
      .left {
        width: 70%;
        // padding: 20px;
        background: #e5f2f5;
        border-radius: 20px;
      }
      .right {
        width: 28%;
        border-radius: 20px;
        // padding: 20px;
        background: #e5f2f5;
        p {
          padding-left: 20px;
        }
        .zan {
          width: 70%;
          margin: 0 auto;
          padding: 20px 20px;
          display: flex;
          border: 1px solid #ddd;
          border-radius: 10px;
          justify-content: space-between;
          div {
            cursor: pointer;
            &.l {
              display: flex;
              align-items: center;
              span {
                &:last-child {
                  width: 60px;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  background: #fff;
                  border-radius: 10px;
                  margin-left: 10px;
                  &:active {
                    font-size: 20px;
                  }
                }
              }
            }
            &.r {
              display: flex;
              align-items: center;
              span {
                &:last-child {
                  width: 60px;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;

                  background: #fff;
                  border-radius: 10px;
                  margin-left: 10px;
                  &:active {
                    font-size: 20px;
                  }
                }
              }
            }
          }
        }
        .btn {
          display: flex;
          justify-content: flex-end;
          padding-right: 20px;
          margin-top: 100px;
        }
      }
    }
  }
}
</style>